import * as THREE from 'three';

import Stats from 'three/addons/libs/stats.module.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { getFakeData, getRandomInt, worldToScreen } from '@/core/tooler';
import { Line2 } from 'three/examples/jsm/lines/Line2.js'
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
import Matter from "matter-js"
import { initConn } from "./Connection"
import { Bus, CONN_ACTIVITY } from './Bus';

// import { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'three.meshline';

// import { MeshLine, MeshLineMaterial } from "./line.js"

// initConn();

// import { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'three.meshline';

// import { MeshLine, MeshLineMaterial } from "./line.js"

//虚线动画更新位置

let group: any;
let container, stats: any;
let camera: any, scene: any, renderer: any;
let matLine: any;
const config = {
    pointerColor: 0xafd516,
    eoxColor: 0xf5ab35,
    hoverColor: 0xffffff,
    lineColor: 0x00ff00,
    linewidth: 1,
    pointerSize: 40
}

let pot1: THREE.Mesh;
let pot2: THREE.Mesh;
let line: any;

export function init(canvas: any, $overlay: any) {
    container = document.body;
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 20000);
    camera.position.z = 60;

    const controls = new OrbitControls(camera, container);
    controls.minDistance = 1;
    controls.maxDistance = 1000;

    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x000000, 0.0004);

    group = new THREE.Group();
    scene.add(group);

    renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.autoClear = false;

    stats = new Stats();
    container.appendChild(stats.dom);

    let light = new THREE.DirectionalLight(0xffffff, 0.8);
    light.position.set(200, 200, 100);
    scene.add(light)

    matLine = new LineMaterial({
        color: config.lineColor,
        linewidth: config.linewidth, // in world units with size attenuation, pixels otherwise
        vertexColors: false,
        //resolution:  // to be set by renderer, eventually
        dashed: true,
        alphaToCoverage: false,
        worldUnits: true,
        opacity: 1,
        dashSize: 3,
        gapSize: 3,
    });

    addView();

    animate();
}
let arrowHelper: THREE.ArrowHelper;
const headLength = 2; // 箭头长度
const headWidth = 1;  // 箭头宽度
function addView() {
    let p1 = new THREE.Vector3(-5, 3, 0);
    let p2 = new THREE.Vector3(2, 0, 4);
    pot1 = addPoint(p1);
    pot2 = addPoint(p2);
    group.add(pot1);
    group.add(pot2);
    line = addLine(pot1.position, pot1.position);
    // group.add(line);

    // const origin = new THREE.Vector3(0, 0, 0);
    // const direction = new THREE.Vector3(1, 0, 0);
    const length = p1.distanceTo(p2);
    const color = 0xff0000;
    const direction = new THREE.Vector3().subVectors(p2, p1).normalize();

    arrowHelper = new THREE.ArrowHelper(direction, p1, length, color, headLength, headWidth);
    group.add(arrowHelper);
    console.log(arrowHelper)
    
   
    // setTimeout(() => {
    //     arrowHelper.setLength(length * 4)
    // }, 2000);

}


function addPoint(p: THREE.Vector3) {
    let geo = new THREE.SphereGeometry(3, 32, 32);
    let mat = new THREE.MeshBasicMaterial({ color: new THREE.Color(0xff9900) });
    let mesh = new THREE.Mesh(geo, mat);
    mesh.position.set(p.x, p.y, p.z);
    return mesh;
}

function addLine(p1: THREE.Vector3, p2: THREE.Vector3) {
    const positions = [];
    positions.push(p1.x, p1.y, p1.z)
    positions.push(p2.x, p2.y, p2.z)
    const geometry = new LineGeometry();
    geometry.setPositions(positions);
    let line = new Line2(geometry, matLine);
    line.computeLineDistances();
    line.scale.set(1, 1, 1);
    return line;
}

function animate() {
    requestAnimationFrame(animate);
    stats.update();
    render();
}

function render() {
    // const time = Date.now() * 0.001;
    pot1.position.x -= 0.02;
    pot2.position.x += 0.02;

    let ps = [];
    let p1 = pot1.position;
    let p2 = pot2.position;
    let distance = 1;
    ps.push(p1.x, p1.y - distance, p1.z);
    ps.push(p2.x, p2.y - distance, p2.z);
    ps.push(p2.x, p2.y + distance, p2.z);
    ps.push(p1.x, p1.y + distance, p1.z);

    line.geometry.setPositions(ps);
    line.computeLineDistances();

    arrowHelper.setLength(p1.distanceTo(p2) - 3, headLength, headWidth)
    arrowHelper.setDirection(new THREE.Vector3().subVectors(p2, p1).normalize());
    arrowHelper.position.copy(p1);

    matLine.resolution.set(window.innerWidth, window.innerHeight);
    matLine.dashOffset += 0.1;
    renderer.render(scene, camera);
}